import React, { PureComponent } from 'react';
import { Modal, Form, Input, Tabs, InputNumber } from 'antd';
import SecretInput from './SecretInput';
import PeriodInput from './PeriodInput';
import GrantTypeInput from './GrantTypeInput';

const { Item: FormItem } = Form;
const { TabPane } = Tabs;

@Form.create()
class ClientForm extends PureComponent {
  state = {
    tabKey: '1',
  };

  reset = () => {
    const { form } = this.props;
    form.resetFields();
    this.setState({ tabKey: '1' });
  };

  render() {
    const { data, visible, submitting, onSave, onClose, form } = this.props;
    const { tabKey } = this.state;
    const formItemLayout = {
      labelCol: { span: 5 },
      wrapperCol: { span: 15 },
    };
    const title = data.clientId ? '更新应用' : '添加应用';
    return (
      <Modal
        style={{ top: 10 }}
        width={800}
        title={title}
        visible={visible}
        confirmLoading={submitting}
        onCancel={() => {
          this.reset();
          onClose();
        }}
        onOk={() => {
          form.validateFields((err, values) => {
            if (!err) onSave(values);
            else this.setState({ tabKey: '1' });
          });
        }}
      >
        <Form>
          <Tabs
            tabPosition="left"
            activeKey={tabKey}
            onChange={activeKey => this.setState({ tabKey: activeKey })}
          >
            <TabPane tab="授权设置" key="1">
              <FormItem label="应用ID" {...formItemLayout}>
                {form.getFieldDecorator('clientId', {
                  rules: [
                    {
                      type: 'string',
                      required: true,
                      message: '应用ID不能为空！',
                    },
                  ],
                  initialValue: data.clientId,
                })(<Input disabled={!!data.clientId} />)}
              </FormItem>
              <FormItem label="应用名称" {...formItemLayout}>
                {form.getFieldDecorator('clientName', {
                  rules: [
                    {
                      type: 'string',
                      required: true,
                      message: '应用名称不能为空！',
                    },
                  ],
                  initialValue: data.clientName,
                })(<Input />)}
              </FormItem>
              <FormItem label="资源IDs" {...formItemLayout}>
                {form.getFieldDecorator('resourceIds', {
                  rules: [
                    {
                      type: 'string',
                      required: true,
                      message: '资源IDs不能为空！',
                    },
                  ],
                  initialValue: data.resourceIds,
                })(<Input />)}
              </FormItem>
              <FormItem label="授权类型" {...formItemLayout}>
                {form.getFieldDecorator('authorizedGrantTypes', {
                  rules: [
                    {
                      type: 'string',
                      required: true,
                      message: '请选择授权类型！',
                    },
                  ],
                  initialValue: data.authorizedGrantTypes,
                })(<GrantTypeInput />)}
              </FormItem>
              <FormItem label="Token有效期" {...formItemLayout}>
                {form.getFieldDecorator('accessTokenValidity', {
                  initialValue: data.accessTokenValidity,
                })(<PeriodInput />)}
              </FormItem>
              <FormItem label="Refresh有效期" {...formItemLayout}>
                {form.getFieldDecorator('refreshTokenValidity', {
                  initialValue: data.refreshTokenValidity,
                })(<PeriodInput />)}
              </FormItem>
              <FormItem label="秘钥" {...formItemLayout}>
                {form.getFieldDecorator('clientSecret', {
                  initialValue: data.clientSecret,
                })(<SecretInput />)}
              </FormItem>
            </TabPane>
            <TabPane tab="短信设置" key="2">
              <FormItem label="验证码长度" {...formItemLayout}>
                {form.getFieldDecorator('smsCodeLength', {
                  initialValue: data.smsCodeLength,
                })(<InputNumber min={1} style={{ width: 300 }} />)}
              </FormItem>
              <FormItem label="验证码有效期(分钟)" {...formItemLayout}>
                {form.getFieldDecorator('smsCodeExpire', {
                  initialValue: data.smsCodeExpire,
                })(<InputNumber min={1} style={{ width: 300 }} />)}
              </FormItem>
              <FormItem label="验证码签名" {...formItemLayout}>
                {form.getFieldDecorator('smsCodeSign', {
                  initialValue: data.smsCodeSign,
                })(<Input style={{ width: 300 }} />)}
              </FormItem>
            </TabPane>
          </Tabs>
        </Form>
      </Modal>
    );
  }
}

export default ClientForm;
